import React, { Component } from 'react'
// HashRouter 重新起名字为 Router   BrowserRouter 不带#（vue history）  HashRouter 带有#(vue hash)
// Switch 多个中选一个 同时只能满足1个路由
// Route 代表1个路由
// Router 只能出现1次，一般放在顶级组件中
import { BrowserRouter as Router, Switch, Route, NavLink, Redirect } from 'react-router-dom'
import './style.css'
import Home from './views/home/index'
// import Kind from './views/kind/index'
// import Cart from './views/cart/index'
// import User from './views/user/index'
// import Detail from './views/detail'
// import NotFound from './views/404'
const Kind = React.lazy(() => import('./views/kind/index'))
const Cart = React.lazy(() => import('./views/cart/index'))
const User = React.lazy(() => import('./views/user/index'))
const Detail = React.lazy(() => import('./views/detail/index'))
const NotFound = React.lazy(() => import('./views/404/index'))
export default class App extends Component {
  render() {
    return (
      <Router>
        <div className="container">
          <div className="tip">请将屏幕竖向浏览</div>
          {/* 定义路由规则 -- react - 一切皆组件 -- 所见即所得 */}
          <React.Suspense fallback={<div>加载中....</div>}>
            <Switch>
              {/* react 三种定义路由的方式 */}
              {/* component 属性的方式 */}
              <Route path = "/home" component = { Home } />
              {/* children 方式 */}
              <Route path = "/kind">
                <Kind />
              </Route>
              {/* render 函数方式 */}
              <Route path = "/cart" render = { () => {
                return <Cart />
              }} />
              <Route path="/user" component = { User } />
              <Route path="/detail/:proid" component = { Detail } />
              <Redirect path="/" exact to="/home" />
              <Route component = { NotFound } />
            </Switch>
          </React.Suspense>
          <footer className="footer">
            <ul>
              {/* 
                声明式导航跳转
                vue router-link tag
                react Link  NavLink 没有tag属性  ---- 渲染为a标签
                记得修改样式表
              */}
              <NavLink to = "/home">
                <span className="iconfont icon-shouye"></span>
                <p>首页</p>
              </NavLink>
              <NavLink to = "/kind">
                <span className="iconfont icon-leimupinleifenleileibie"></span>
                <p>分类</p>
              </NavLink>
              <NavLink to = "/cart">
                <span className="iconfont icon-shopping-cart"></span>
                <p>购物车</p>
              </NavLink>
              <NavLink to = "/user">
                <span className="iconfont icon-wode"></span>
                <p>我的</p>
              </NavLink>
            </ul>
          </footer>
        </div>
      </Router>
      
    )
  }
}
